<template>
  <view class="container">
    <view class="container-box">
      <view class="box-title">取消原因</view>
      <view class="title">个人原因</view>
      <block v-for="(item, index) in reasonList.selfReason" :key="item.id">
        <view class="reason-item">
          <view>{{ item.text }}</view>
          <u-icon size="40rpx" :color="item.id == reasonCheck ? '#32B499' : '#BBBBBB'"
            :name="item.id == reasonCheck ? '/static/icon/checkAct.png' : '/static/icon/check.png'" @click="checkReason(item)" />
        </view>
      </block>
      <view class="title">门店原因</view>
      <block v-for="(item, index) in reasonList.businessReason" :key="item.id">
        <view class="reason-item">
          <view>{{ item.text }}</view>
          <u-icon size="40rpx" :color="item.id == reasonCheck ? '#32B499' : '#BBBBBB'"
            :name="item.id == reasonCheck ? '/static/icon/checkAct.png' : '/static/icon/check.png'" class="check" @click="checkReason(item)" />
        </view>
      </block>

      <view class="submit-btn">
        <view @click="submit">提交</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      reasonList: {
        selfReason: [
          { id: 0, text: '临时有事无法收货' },
          { id: 1, text: '电话/地址填写错误' },
          { id: 2, text: '忘记使用或者选错优惠券' },
          { id: 3, text: '备注信息忘记填或者填错' },
          { id: 4, text: '没错/买多/漏买/暂不需要商品' },
        ],
        businessReason: [
          { id: 5, text: '店员通知我缺货' },
          { id: 6, text: '店员沟通态度差' },
          { id: 7, text: '其它' },
        ]
      },
      reasonCheck: 0,
      cancelReason: '临时有事无法收货',
      orderId:''
    }
  },
  onLoad(options) {
    const { orderId } = options;
    this.orderId = orderId
  },
  methods: {
    checkReason(item) {
      this.reasonCheck = item.id
      this.cancelReason = item.text
    },

    submit() {
      const { cancelReason, orderId } = this
      const param = {
        orderId,
        cancelReason
      }
      this.$request.miniCancelOrder(param).then(res => {
        if (res.msg == '成功') {
          this.$toast('取消订单成功');
          setTimeout(() => {
            this.$goPath(1)
          }, 500)
          return;
        }
        this.$toast(res.msg);
      });
    },
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;
  padding: 24rpx;
  padding-bottom: 0;
  color: #333;
  font-size: 28rpx;
}

.container-box {
  padding: 24rpx;
  height: 100%;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  position: relative;
}

.box-title {
  font-size: 32rpx;
  font-weight: bold;
}

.title {
  font-size: 24rpx;
  margin-bottom: 24rpx;
  margin-top: 50rpx;
}

.reason-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.submit-btn {
  position: absolute;
  left: 0;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn>view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440rpx;
  height: 80rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  background-color: #37B79B;
  border-radius: 40rpx;
}
</style>